import { Button } from '@/components/ui/button';
import { X } from 'lucide-react';
import { format } from 'date-fns';
import { DatePicker } from '../DatePicker/DatePicker';
import { TimeIcon } from '../Icons';

interface TaskDateProps {
  endDate: string | Date | null;
  updateTask: (item: any) => void;
}

export const TaskDate = ({ endDate, updateTask }: TaskDateProps) => (
  <DatePicker setTaskDate={updateTask} end_date={endDate}>
    {endDate ? (
      <Button variant='ghost' className='p-1 hover:bg-transparent hover:text-slate-400 text-slate-700 group/date'>
        {format(endDate, 'dd.LL.yyyy')}
        <span className='rounded-full bg-slate-400 text-white opacity-0 hover:bg-slate-700 group-hover/date:opacity-100' onClick={() => updateTask({ end_date: '' })}>
          <X size={14} />
        </span>
      </Button>
    ) : (
      <Button variant='ghost' className='p-1 hover:bg-transparent hover:text-slate-400 text-slate-700'>
        <TimeIcon size={18} />
      </Button>
    )}
  </DatePicker>
);
